<template>
    <div class="user">
        <div class="password">
            <div class="flex">
                <input v-model="password" class="password" id="password" name="password" placeholder="请输入新的用户名"/>
            </div>
        </div>
        <div class="buttonList" v-for="(item,index) in items">
            <div class="flex">
                <div class="flexItem" @click="onRename">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import { post } from "../../js/utils";

    export default {
        name: 'Rename',
        components: {},
        data () {
            return {
                password:'',
                items: [{name: '重命名'}],
            }
        },
        async created () {

        },
        methods: {
            onRename : async function () {
                console.info(this.password)
                let ret = await post("/user/setUserDeviceKv", {
                    devId: this.$route.query.devId,
                    key: "id_"+this.$route.query.id,
                    value: JSON.stringify({name:this.password}),
                })
                this.$router.push({
                    path: "/userList",
                    query: {"devId":this.$route.query.devId}
                });//其中login是你定义的一个路由模块
            }
        }
    }
</script>

<style scoped>

    /*密码输入框*/
    .user > .password {
        width: 92%;
        margin-left: 4vw;
        margin-top: 20px;
    }

    .user > .password > .flex {
        display: flex;
        justify-content: center;
    }

    .user > .password > .flex > .password {
        /*删除样式*/
        outline: 0;
        -web-kit-appearance: none;
        -moz-appearance: none;

        width: 100%;
        height: 10vh;
        align-self: center;
        font-size: 1em;
        background: url(../../assets/addGatewayChoose_04.png) no-repeat center top;
        background-size: 100% 100%;
        border-radius: 15px;
        border: 1px solid #c8cccf;
        color: #6a6f77;

        padding-left: 10vw;
    }

    .user > .password > .flex > .password::-webkit-input-placeholder {
        /*padding-left:20px;*/
        opacity:0.5;
    }

    /*按钮*/
    .user > .buttonList > .flex {
        width: 100vw;
        min-height: 8vh;
        margin-top: 8vh;
        display: flex;
        justify-content: center;
        line-height: 10vh;

    }

    .user > .buttonList > .flex > .flexItem {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }


</style>
